<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/button/button.js" charset="utf-8"></script>
<div id="buttonDemo">
    <div title='API' tabid='tab1'>
       <div>
				<h2>Ccay.UI.button(text, click, permission, type, imgtype, isI18n, attr)</h2>
				<span><font color='red'>含7个参数</font>，或者如下使用：</span>
				<h2>Ccay.UI.button(option)</h2>
				<span>
				其中option可配置如下
				<font color='red'>8个参数</font>：
				{text:XXX, click:XXX, permission:XXX, type:XXX, imgtype:XXX, isI18n:XXX, attr:XXX,css:XXX}</span>
				
				<h3 style="padding-top:10px;padding-bottom:10px">作用：根据参数生成相应的按钮类型的html代码</h3>
				
				<form id="param" class="init ccay-form">
					<div class="ccay-form-body ccay-form-custom">
						<ul>
						    <li class="ccay-form-row">
						        <samp><h3>参数</h3></samp>
								<span class="ccay-form-input">
									<h3>描述</h3>
								</span>
							</li>
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="text"></samp>							    
								<span class="ccay-form-input">
									{String类型}<p>国际化资源key，显示的title值 </span></li>
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="click"></samp>
							    <span class="ccay-form-input">
									{String类型}<p>绑定的事件字符串 </span></li>
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="permission"></samp>
							    <span class="ccay-form-input">
									{String类型} <p>绑定的权限点，如过有权限才生成该代码，否则返回空字符串，如"Service$HtmlArea$create"。
									            <p>可传空字符串，则不绑定权限。
							    </span></li>
							<li class="ccay-form-row">
							    <samp class="i18n" i18nKey="type"></samp>
							    <span class="ccay-form-input">
									{String类型}<p>是否是图片按钮;'input','img','link', 'imgBtn' 四种，默认为input，有4种：
									<p>input:普通按钮
									<p>link：链接按钮
									<p>img：图片按钮            
									<p>imgBtn：图片+文字 按钮             
							    </span></li>
					       <li class="ccay-form-row">
					            <samp class="i18n" i18nKey="imgtype"></samp>
								<span class="ccay-form-input">
					             {String类型}<p>图片按钮的类型，只有type为“img”时有效，type为‘input’或‘link’时，可不传该参数
					             <p>该参数有如下类表的小图标：
					    		</span></li>
					    	<li class="ccay-form-row">
					            <samp class="i18n" i18nKey="isI18n"></samp>
								<span class="ccay-form-input">
					             {Boolean类型}<p>是否是国际化key，不指定为false时，默认自动国际化
					    		</span></li>
				    		<li class="ccay-form-row">
					            <samp class="i18n" i18nKey="attr"></samp>
								<span class="ccay-form-input">
					             {json类型}<p>其他属性的设置，如：{id:'XXX',name:'XXX'}
					    		</span></li>
				    </ul>
			   </div>
		        </form>
		        <br><br>
		        <span>由该方法，可生成的图标样式类型如下，具体用法请参考demo：</span>
		        <div class='demo'>
		            <h3>1、小图标 ccay-icon ：如：&lt;a class="ccay-icon default" title="default" >&lt;/a></h3><br>
					<table class="ccay-table" style="text-align:center">
					  <tr>
					    <td width="10%">default</td>
					    <td width="10%">add</td>
					    <td width="10%">del</td>
					    <td width="10%">pre-del</td>
					    <td width="10%">edit</td>
					    <td width="10%">save</td>
					    <td width="10%">import</td>
					    <td width="10%">export</td>
					    <td width="10%">view</td>
					    <td width="10%">replace</td>
					  </tr>
					  <tr>
					    <td><a class="ccay-icon default" title="default" ></a></td>
					    <td><a class="ccay-icon add" title="add"></a></td>
					    <td><a class="ccay-icon del" title="del"  ></a></td>
					    <td><a class="ccay-icon pre-del" title="pre-del"  ></a></td>
					    <td><a class="ccay-icon edit" title="edit" ></a></td>
					    <td><a class="ccay-icon save" title="save"  ></a></td>
					    <td><a class="ccay-icon import" title="import" ></a></td>
					    <td><a class="ccay-icon export" title="export" ></a></td>
					    <td><a class="ccay-icon view" title="view" ></a></td>
					    <td><a class="ccay-icon replace" title="replace" ></a></td>
					  </tr>	
					  <tr>
					    <td>confirm</td>
					    <td>cancel</td>
					    <td>close</td>
					    <td>back</td>
					    <td>download</td>
					    <td>upload</td>
					    <td>end</td>
					    <td>reset</td>
					    <td>copy</td>
					    <td>setting</td>
					  </tr>
					  <tr>
					    <td><a class="ccay-icon confirm" title="confirm" ></a></td>
					    <td><a class="ccay-icon cancel" title="cancel" ></a></td>
					    <td><a class="ccay-icon close" title="close" ></a></td>
					    <td><a class="ccay-icon back" title="back" ></a></td>
					    <td><a class="ccay-icon download" title="download" ></a></td>
					    <td><a class="ccay-icon upload" title="upload"  ></a></td>
					    <td><a class="ccay-icon end" title="end" ></a></td>
					    <td><a class="ccay-icon reset" title="reset"  ></a></td>
					    <td><a class="ccay-icon copy" title="copy" ></a></td>
					    <td><a class="ccay-icon setting" title="setting"></a></td>
					  </tr>
					  <tr>
					    <td>refresh</td>
					    <td>undo</td>
					    <td>pager-first</td>
					    <td>pager-prev</td>
					    <td>pager-next</td>
					    <td>pager-last</td>
					    <td>pager-goto</td>
					    <td>sort</td>
					    <td>asce</td>
					    <td>desc</td>
					  </tr>
					  <tr>
					    <td><a class="ccay-icon refresh" title="refresh"  ></a></td>
					    <td><a class="ccay-icon undo" title="undo" ></a></td>
					    <td><a class="ccay-icon pager-first" title="pager-first" ></a></td>
					    <td><a class="ccay-icon pager-prev" title="pager-prev" ></a></td>
					    <td><a class="ccay-icon pager-next" title="pager-next" ></a></td>
					    <td><a class="ccay-icon pager-last" title="pager-last" ></a></td>
					    <td><a class="ccay-icon pager-goto" title="pager-goto" ></a></td>
					    <td><a class="ccay-icon sort" title="sort" ></a></td>
					    <td><a class="ccay-icon asce" title="asce" ></a></td>
					    <td><a class="ccay-icon desc" title="desc" ></a></td>
					  </tr>	
					  <tr>
					    <td>menu-downarrow</td>
					    <td>pause</td>
					    <td>restore</td>
					    <td>lock</td>
					    <td>dialog-close</td>
					    <td>tab-close</td>
					    <td>print</td>
					    <td>preview</td>
					    <td>execute</td>
					    <td>commission</td>	
					    	    
					  </tr>	
					  <tr>
					    <td><a class="ccay-icon menu-downarrow" title="menu-downarrow" ></a></td>
					    <td><a class="ccay-icon pause" title="pause"></a></td>
					    <td><a class="ccay-icon restore" title="restore"></a></td>
					    <td><a class="ccay-icon lock" title="lock" ></a></td>
					    <td><a class="ccay-icon dialog-close" title="dialog-close" ></a></td>
					    <td><a class="ccay-icon tab-close" title="tab-close" ></a></td>
					    <td><a class="ccay-icon print" title="print" ></a></td>
					    <td><a class="ccay-icon preview" title="preview"></a></td>
					    <td><a class="ccay-icon execute" title="execute"></a></td>
					    <td><a class="ccay-icon commission" title="commission" ></a></td>
					  </tr>	
					  <tr>
					    <td>enable</td>
					    <td>disable</td>
					    <td>yes</td>
					    <td>no</td>
					    <td>invalid</td>	
					    <td>valid</td>
					    <td>on-line</td>
					    <td>leave</td>
					    <td>busy</td>
					    <td>off-line</td>
					  </tr>
					  <tr>
					    <td><a class="ccay-icon enable" title="enable" ></a></td>
					    <td><a class="ccay-icon disable" title="disable" ></a></td>
					    <td><a class="ccay-icon yes" title="yes" ></a></td>
					    <td><a class="ccay-icon no" title="no" ></a></td>
					    <td><a class="ccay-icon invalid" title="invalid" ></a></td>
					    <td><a class="ccay-icon valid" title="valid"></a></td>
					    <td><a class="ccay-icon on-line" title="on-line"  ></a></td>
					    <td><a class="ccay-icon leave" title="leave"  ></a></td>
					    <td><a class="ccay-icon busy" title="busy" ></a></td>
					    <td><a class="ccay-icon off-line" title="off-line" ></a></td>
					  </tr>
					  <tr>
					    <td>status-new</td>
					    <td>status-draft</td>
					    <td>no-del</td>
					    <td>no-premission</td>
					    <td>menu-expend</td>
					    <td>menu-shrink</td>
					    <td>show</td>
					    <td>hidden</td>
					    <td>folder-closed</td>
					    <td>folder-opened</td>			    
					  </tr>	
					  <tr>
					    <td><a class="ccay-icon status-new" title="status-new"  ></a></td>
					    <td><a class="ccay-icon status-draft" title="status-draft" ></a></td>
					    <td><a class="ccay-icon no-del" title="no-del" ></a></td>
					    <td><a class="ccay-icon no-premission" title="no-premission"></a></td>
					    <td><a class="ccay-icon menu-expend" title="menu-expend" ></a></td>
					    <td><a class="ccay-icon menu-shrink" title="menu-shrink"></a></td>
					    <td><a class="ccay-icon show" title="show" ></a></td>
					    <td><a class="ccay-icon hidden" title="hidden"></a></td>
					    <td><a class="ccay-icon folder-closed" title="folder-closed" ></a></td>
					    <td><a class="ccay-icon folder-opened" title="folder-opened" ></a></td>
					  </tr>
					  <tr>
					    <td>open</td>
					    <td>close</td>
					    <td>checked</td>
					    <td>unchecked</td>
					    <td>pre-checked</td>
					    <td>radio-checked</td>
					    <td>radio-unchecked</td>
					    <td>link</td>
					    <td>admin</td>
					    <td>group</td>
					  </tr>	
					  <tr>
					    <td><a class="ccay-icon open" title="open"  ></a></td>
					    <td><a class="ccay-icon close" title="close"  ></a></td>
					    <td><a class="ccay-icon checked" title="checked" ></a></td>
					    <td><a class="ccay-icon unchecked" title="unchecked"></a></td>
					    <td><a class="ccay-icon pre-checked" title="pre-checked" ></a></td>
					    <td><a class="ccay-icon radio-checked" title="radio-checked"></a></td>
					    <td><a class="ccay-icon radio-unchecked" title="radio-unchecked" ></a></td>
					    <td><a class="ccay-icon link" title="link" ></a></td>
					    <td><a class="ccay-icon admin" title="admin"></a></td>
					    <td><a class="ccay-icon group" title="group"></a></td>
					    
					  </tr>
					  <tr>
					    <td>log</td>
					    <td>help</td>
					    <td>warning</td>
					    <td>female</td>
					    <td>male</td>
					    <td>attachment</td>
					    <td>mail</td>
					    <td>msg</td>
					    <td>date</td>
					    <td>statistics</td>
					  </tr>
					  <tr>
					    <td><a class="ccay-icon log" title="log"></a></td>
					    <td><a class="ccay-icon help" title="help"></a></td>
					    <td><a class="ccay-icon warning" title="warning"></a></td>
					    <td><a class="ccay-icon female" title="female" ></a></td>
					    <td><a class="ccay-icon male" title="male"></a></td>
					    <td><a class="ccay-icon attachment" title="attachment" ></a></td>
					    <td><a class="ccay-icon mail" title="mail"  ></a></td>
					    <td><a class="ccay-icon msg" title="msg"  ></a></td>
					    <td><a class="ccay-icon date" title="date"  ></a></td>
					    <td><a class="ccay-icon statistics" title="statistics" ></a></td>
					  </tr>
					  <tr>
					    <td>pic</td>
					    <td>flow</td>
					    <td>callback</td>
					    <td>search</td>
					    <td>excel</td>
					    <td>panel-normal</td>
					    <td>panel-minimize</td>
					    <td>panel-maximize</td>
					    <td>undel</td>
					    <td>user-permission</td>
					  </tr>	
					  <tr>
					    <td><a class="ccay-icon pic" title="pic"  ></a></td>
					    <td><a class="ccay-icon flow" title="flow"></a></td>
					    <td><a class="ccay-icon callback" title="callback"></a></td>
					    <td><a class="ccay-icon search" title="search"></a></td>
					    <td><a class="ccay-icon excel" title="excel" ></a></td>
					    <td><a class="ccay-icon panel-normal"></a></td>
					    <td><a class="ccay-icon panel-minimize"></a></td>
					    <td><a class="ccay-icon panel-maximize"></a></td>
					    <td><a class="ccay-icon undel"></a></td>
					    <td><a class="ccay-icon userpermission"></a></td>
					  </tr>
					   <tr>
					    <td>update-information</td>
					  </tr>	
					   <tr>
					    <td><a class="ccay-icon updateinfo"  ></a></td>
					  </tr>		
					</table>
				</div>
				<div class="demo">	
				    <h3>2、大图标 ccay-bigicon ：如：&lt;a class="ccay-bigicon msg-success" title="msg-success">&lt;/a></h3><br>
					<table class="ccay-table" style="text-align:center">
					  <tr>
					    <td>msg-success</td>
					    <td>msg-failure</td>
					    <td>msg-warning</td>
					    <td>msg-confirm</td>
					    <td>msg-forbid</td>
					  </tr>
					  <tr height="50px">
					    <td><a class="ccay-bigicon msg-success" title="msg-success"></a></td>
					    <td><a class="ccay-bigicon msg-failure" title="msg-failure"></a></td>
					    <td><a class="ccay-bigicon msg-warning" title="msg-warning"></a></td>
					    <td><a class="ccay-bigicon msg-confirm" title="msg-confirm"></a></td>
					    <td><a class="ccay-bigicon msg-forbid" title="msg-forbid"></a></td>
					  </tr>
					  <tr>   
					    <td>big-export</td>
					    <td>big-import</td>
					    <td>big-apply</td>
					    <td>big-todo</td>
					    <td>big-permission</td>
					  </tr>
					  <tr height="50px">
					    <td><a class="ccay-bigicon big-export" title="big-export"></a></td>
					    <td><a class="ccay-bigicon big-import" title="big-import"></a></td>
					    <td><a class="ccay-bigicon big-apply" title="big-apply"></a></td>
					    <td><a class="ccay-bigicon big-todo" title="big-todo"></a></td>
					    <td><a class="ccay-bigicon big-permission" title="big-permission"></a></td>
					  </tr>
					</table>						    			    
			    </div>
			    <div class="demo">	
				    <h3>3、图标按钮 ccay-button 部分示例:</h3>
				    <pre>
<h3><font color="red">Ccay.UI.button(text, click, permission, type, imgtype,isIi8n,attr)</font></h3>其生成的按钮图标的标签如下：
<br>
<font color="red">使用注意：</font>
1、text  为按钮的名称，配置国际化
2、click  指定事件
3、permission  绑定按钮的权限
4、imgtype  的类型可以<font color="red">指定如上面的小图标的名称类型</font>
5、type  指定为  <font color="red">"imgBtn"</font>
6、attr  可省略，非必需。可指定多个其他属性 如 ：attr = {id:'XXX',name:'XXX'}
7、css  可省略，非必需。可指定额外的class值，如：css："default"
<br>
<h3>生成的html为如下，也可直接使用该html进行初始化(直接赋予各个参数):</h3>
&lt;span class="ccay-button <font color="red">{css}</font>" <font color="red">{attr}</font> onclick=<font color="red">"{click}"</font>>
	&lt;a class="ccay-icon <font color="red">{imgtype}</font>">&lt;/a>
	&lt;label><font color="red">{text}</font>&lt;/label>
&lt;/span>

示例：
新增按钮：    <span id='haveatry'>Ccay.UI.button("ccay.common.button.add", "alert(1)", "", "imgBtn", "add", true , {id:'addBtn',name:'myBtn'})</span>
				    </pre>
<div class="try">
	<a onclick="Ccay.example.openTry('#buttonDemo',$('#haveatry').html(),'')"><u>亲自试一试</u></a>
</div>
					<table class="ccay-table" style="text-align:center">
						<tr>
							<td>add</td>
							<td>del</td>
							<td>edit</td>
							<td>save</td>
							<td>import</td>
						</tr>
						<tr style="height:30px">
							<td>
							    <span class="ccay-button" onclick="alert(1)" id="addBtn">
									<a class='ccay-icon add'></a>
									<label class="i18n"	i18nkey="ccay.common.button.add"></label>
							    </span>
							</td>
							<td>
							    <span class="ccay-button " onclick="">
									<a class='ccay-icon del'></a>
									<label>删 除</label>
								</span>
							</td>
							<td>
							    <span class="ccay-button " onclick="">
									<a class='ccay-icon edit'></a>
									<label>编 辑</label>
								</span>
							</td>
							<td>
							    <span class="ccay-button " onclick="">
									<a class='ccay-icon save'></a>
									<label>保 存</label>
								</span>
							</td>
							<td>
							    <span class="ccay-button " onclick="">
									<a class='ccay-icon import'></a>
									<label>导 入</label>
								</span>
							</td>
						</tr>
						<tr>
						    <td>export</td>
						    <td>view</td>
						    <td>confirm</td>
						    <td>cancel</td>
						    <td>back</td>
					    </tr>
						<tr style="height:30px">
						    <td>
								   <span class="ccay-button" onclick="" id="">
									<a class='ccay-icon export'></a>
									<label>导 出</label>
								   </span>
							</td>
							 <td>
								    <span class="ccay-button" onclick="" id="">
										<a class='ccay-icon view'></a>
										<label>查 看</label>
									</span>
							</td>
							<td>
								<span class="ccay-button" onclick="" id="">
									<a class='ccay-icon confirm'></a>
									<label>确 认</label>
								</span>
							</td>
							<td>
								<span class="ccay-button" onclick="" id="">
									<a class='ccay-icon cancel'></a>
									<label>取 消</label>
								</span>
							</td>
							<td>
								 <span class="ccay-button" onclick="" id="">
									<a class='ccay-icon back'></a>
									<label>返 回</label>
								</span>
							</td>
						  </tr>
						  <tr style="height:30px">
						    <td>search</td>
					      </tr>
						  <tr>
						   	<td>
						  		<span class="ccay-button" onclick="" id="">
									<a class='ccay-icon search'></a>
									<label>搜 索</label>
								</span>
							</td>
						  </tr>
					</table>						    			    
			    </div>
			    <div class="demo">
			        <h3>4、grid工具条中示例</h3><br>
			        <div class="ccay-grid">
					    <div class="ccay-grid-toolbar">
							    <span class="ccay-button " onclick="" id="">
									<a class='ccay-icon add'></a>
									<label>添 加</label>
								</span>
							    <span class="ccay-button " onclick="" id="">
									<a class='ccay-icon pre-del'></a>
									<label>标识为删除</label>
								</span>
								<span class="ccay-button " onclick="" id="">
									<a class='ccay-icon pre-del'></a>
									<label>取消删除</label>
								</span>
							    <span class="ccay-button " onclick="" id="">
									<a class='ccay-icon save'></a>
									<label>保 存</label>
								</span>
							    <span class="ccay-button " onclick="" id="">
									<a class='ccay-icon import'></a>
									<label>导 入</label>
								</span>
								<span class="ccay-button " onclick="" id="">
									<a class='ccay-icon export'></a>
									<label>导 出</label>
								</span>
								<span class="ccay-button " onclick="" id="">
									<a class='ccay-icon back'></a>
									<label>返 回</label>
								</span>
					    </div>
						<!--数据表格-->
						<div id="i18nIgrid"></div>
					</div>
			    </div>
	   </div>	 
       
    </div>	
	<div title='Demo' tabid='tab2'>
		<div>
			<h4><span>实例1：普通按钮</span></h4>
			<div style='padding-left:30px'>
				<span>1.1 普通按钮,由html或由js生成的html 生成按钮。</span>
				
				<div class='demo'>
				    <input type="button" class="i18n" i18nKey="ccay.common.button.ok" onclick="alert('I am a Button')"/>
				</div>
				<h3>html code</h3>
				<div class='codeArea'>
					<pre id='html11'>&lt;input type="button" class="i18n" i18nKey="ccay.common.button.ok" onclick="alert('I am a Button')"/></pre>
				</div> 
				<div class="try">
					<a onclick="Ccay.example.openTry('#buttonDemo','',$('#html11').html())">亲自试一试</a>
				</div>
	            <h3>js code</h3>
				<div class='codeArea'>
					<pre id='js11'>Ccay.UI.button("Button","alert('Hello world!')","Service$HtmlArea$create","input","");</pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#buttonDemo',$('#js11').html(),'')">亲自试一试</a>
				</div>
				<span>1.2 有特殊样式的按钮，需指定class="special"</span>
				<div class='demo'>
				    <input type="button" class="i18n special" i18nKey="ccay.common.button.ok" onclick="alert('I am a special Button')"/>
				</div>
				<h3>html code</h3>
				<div class="codeArea">
					<pre id='html12'>&lt;input type="button" class="i18n special" i18nKey="ccay.common.button.ok" onclick="alert('special Button')" /></pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#buttonDemo','',$('#html12').html())">亲自试一试</a>
				</div>
            </div>
			<h4><span>实例2：链接按钮</span></h4>
			<div style='padding-left:30px'>
			    <span>说明：由html或js生成的html代码生成的链接标签。html需指定class="ccay-link-btn",js需指定btntype为link。</span>
				<div class='demo'>
				   <a class="i18n ccay-link-btn" i18nKey="我是一个link按钮" onclick="alert('I am a Link Button')" ></a>
				</div> 
				<h3>html code</h3>   
				<div class='codeArea'>
					<pre id='html2'>&lt;a class="i18n ccay-link-btn" i18nKey="ccay.common.button.ok" onclick="alert('Link Button')" >&lt;/a></pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#buttonDemo','',$('#html2').html())">亲自试一试</a>
				</div>
				<h3>js code</h3>
				<div class='codeArea'>
				   <pre id="js2">Ccay.UI.button("linkButton","alert('Hello world!')","Service$HtmlArea$create","link","");</pre>		    
			    </div>
			    <div class="try">
					<a onclick="Ccay.example.openTry('#buttonDemo',$('#js2').html(),'')">亲自试一试</a>
				</div>
            </div>
			<h4><span>实例3：图片按钮</span></h4>
			<div style='padding-left:30px'>
			    <span>说明：由html或js生成html的图片按钮。html需设置class="ccay-icon {类型}"，图片类型有如下：</span>
				<div class='demo'>
					<table class="ccay-table">
					  <tr>
					    <td>edit</td>
					    <td>add</td>
					    <td>key</td>
					    <td>del</td>
					    <td>accept</td>
					    <td>save</td>
					    <td>undo</td>
					    <td>reject</td>
					    <td>group</td>
					    <td>log</td>
					    <td>disabled</td>
					    <td>link</td>
					    <td>admin</td>
					    <td>view</td>
					    <td>run</td>
					    <td>callback</td>
					    <td>light</td>
					    <td>die</td>
					    <td>yes</td>
					    <td>no</td>			    
					  </tr>
					    <td><a class="ccay-icon edit" title="edit" onclick="alert('I am an edit image button')" ></a></td>
					    <td><a class="ccay-icon add" title="add" onclick="alert('I am an add image button')" ></a></td>
					    <td><a class="ccay-icon key" title="key" onclick="alert('I am a key image button')" ></a></td>
					    <td><a class="ccay-icon del" title="delete" onclick="alert('I am a delete image button')" ></a></td>
					    <td><a class="ccay-icon accept" title="accept" onclick="alert('I am an accept image button')"></a></td>
					    <td><a class="ccay-icon save" title="save" onclick="alert('I am a save image button')" ></a></td>
					    <td><a class="ccay-icon undo" title="undo" onclick="alert('I am a undo image button')"></a></td>
					    <td><a class="ccay-icon reject" title="reject" onclick="alert('I am a reject image button')"></a></td>
					    <td><a class="ccay-icon group" title="group" onclick="alert('I am a group image button')"></a></td>
					    <td><a class="ccay-icon log" title="log" onclick="alert('I am a log image button')"></a></td>
					    <td><a class="ccay-icon disabled" title="disabled" onclick="alert('I am an edit disabled button')"></a></td>
					    <td><a class="ccay-icon link" title="link" onclick="alert('I am a link image button')"></a></td>
					    <td><a class="ccay-icon admin" title="admin" onclick="alert('I am an admin image button')"></a></td>
					    <td><a class="ccay-icon view" title="view" onclick="alert('I am a view image button')"></a></td>
					    <td><a class="ccay-icon run" title="run" onclick="alert('I am a run image button')"></a></td>
					    <td><a class="ccay-icon callback" title="callback" onclick="alert('I am a callback image button')"></a></td>
					    <td><a class="ccay-icon light" title="light" onclick="alert('I am a light image button')"></a></td>
					    <td><a class="ccay-icon die" title="die" onclick="alert('I am a die image button')"></a></td>
					    <td><a class="ccay-icon yes" title="yes" onclick="alert('I am a yes image button')"></a></td>
					    <td><a class="ccay-icon no" title="no" onclick="alert('I am a no image button')"></a></td>	
					  <tr>
					  </tr>			
					</table>						    			    
			    </div>      
				<div>
					
				</div>
				<h3>html code</h3>
				<div class="codeArea">
					<pre id="html3">&lt;a class="ccay-icon edit" title="edit" onclick="alert('I am a edit image button')" >&lt;/a></pre>
				</div>
				<div class="try">
					<a onclick="Ccay.example.openTry('#buttonDemo','',$('#html3').html())">亲自试一试</a>
				</div>
				<h3>js code</h3>
				<span>说明：(Ccay.UI.button(text,click,permission,btntype,type))<p>btntype指定为"img",非"img"类型时，type参数可为空；最后一个参数type为指定的图片类型,如上所列出的图片类型。</span>
				<div class="codeArea">
				   <pre id="js3">Ccay.UI.button("edit","alert('Hello world!')","Service$HtmlArea$create","img","edit");</pre>
				</div>	
				<div class="try">
					<a onclick="Ccay.example.openTry('#buttonDemo',$('#js3').html(),'')">亲自试一试</a>
				</div>
            </div>		
	  </div> 
    </div>	
    <div title='button转换为图标按钮' tabid='tab3'></div>	
    <div title='buttons转换为menuButton' tabid='tab4'></div>
    <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:100px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="min-height:50px;overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
    <div title="FAQ" tabid="tab100">
	  <form class="init ccay-form">	
		<div class="ccay-form-body ccay-form-custom">
			<ul>						
			    <li class="ccay-form-row">
			        <samp><h3>问题</h3></samp>
					<span class="ccay-form-input">
						<h3>解决方案</h3>
					</span>
				</li>
				<!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
				<li class="ccay-form-row">
				    <samp class="i18n" i18nKey=""></samp>							    
					<span class="ccay-form-input"></span>
				</li>	
			</ul>
		</div>
	  </form>						
	</div>
</div>	 
